<template>
  <div class="order-list-container">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <el-card class="search-card">
        <div class="search-form">
          <div class="form-row">
            <el-input v-model="info.Name" placeholder="入住人姓名" class="search-input" prefix-icon="User" />

            <el-select v-model="info.RoomTypeId" placeholder="请选择房型" class="search-select">
              <el-option label="请选择" :value="-1" />
              <el-option v-for="item in stt" :label="item.RoomTypeName" :value="item.RoomTypeId" />
            </el-select>

            <el-select v-model="info.RoomCode" placeholder="请选择房号" class="search-select">
              <el-option v-for="item in fanhao" :key="item.RoomId" :label="item.RoomName" :value="item.RoomName" />
            </el-select>
          </div>

          <div class="form-row">
            <el-radio-group v-model="info.Status" class="status-group">
              <el-radio :value="-1">全部</el-radio>
              <el-radio :value="1">待支付</el-radio>
              <el-radio :value="2">已支付</el-radio>
              <el-radio :value="3">已入住</el-radio>
              <el-radio :value="4">已退房</el-radio>
              <el-radio :value="5">已退款</el-radio>
              <el-radio :value="6">已取消</el-radio>
              <el-radio :value="7">已完成</el-radio>
            </el-radio-group>
          </div>

          <div class="form-row">
            <el-button type="primary" :icon="Search" @click="Ored()" class="action-btn">
              查询
            </el-button>
            <el-button type="success" @click="daochu()" class="action-btn">
              导出
            </el-button>
            <el-button type="warning" @click="quxiao()" class="action-btn">
              批量取消
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-card class="table-card">
        <el-table :data="tableData" style="width: 100%" border ref="multipleTableRef" row-key="OrderId"
          @selection-change="handleSelectionChange" class="order-table">
          <el-table-column type="selection" width="55" />
          <el-table-column fixed prop="OrderId" label="订单编号" width="150" />
          <el-table-column prop="MemberName" label="入住人姓名" width="120" />
          <el-table-column prop="RoomTypeName" label="房型名称" width="120" />
          <el-table-column prop="RoomCode" label="房号" width="120" />
          <el-table-column prop="CheckInDate" label="入住日期" width="120">
            <template #default="soup">
              <div class="date-cell">{{ moment(soup.row.CheckInDate).format("YYYY-MM-DD") }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="CheckOutDate" label="离开日期" width="120">
            <template #default="soup">
              <div class="date-cell">{{ moment(soup.row.CheckOutDate).format("YYYY-MM-DD") }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="TotalMoney" label="总金额" width="120">
            <template #default="scope">
              <span class="money-cell">¥{{ scope.row.TotalMoney }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RealMoney" label="实际金额" width="120">
            <template #default="scope">
              <span class="money-cell">¥{{ scope.row.RealMoney }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Status" label="订单状态" width="120">
            <template #default="soup">
              <el-tag v-if="soup.row.Status == 1" type="warning" size="small">
                待支付
              </el-tag>
              <el-tag v-if="soup.row.Status == 2" type="success" size="small">
                已支付
              </el-tag>
              <el-tag v-if="soup.row.Status == 3" type="primary" size="small">
                已入住
              </el-tag>
              <el-tag v-if="soup.row.Status == 4" type="info" size="small">
                已退房
              </el-tag>
              <el-tag v-if="soup.row.Status == 5" type="danger" size="small">
                已退款
              </el-tag>
              <el-tag v-if="soup.row.Status == 6" type="danger" size="small">
                已取消
              </el-tag>
              <el-tag v-if="soup.row.Status == 7" type="success" size="small">
                已完成
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="soup">
              <div class="action-buttons">
                <el-button link type="primary" size="small" v-if="soup.row.Status == 1" @click="fredf(soup.row.OrderId)"
                  class="action-link">
                  入住
                </el-button>
                <el-button link type="primary" size="small" v-if="soup.row.Status == 1 || soup.row.Status == 3"
                  @click="Zhifu(soup.row.OrderId)" class="action-link">
                  支付
                </el-button>
                <el-button link type="danger" size="small" v-if="soup.row.Status == 2" class="action-link">
                  退款
                </el-button>
                <el-button link type="danger" size="small" v-if="soup.row.Status == 1" @click="dele(soup.row.OrderId)"
                  class="action-link">
                  取消
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <el-card class="pagination-card">
        <div class="pagination-container">
          <div class="pagination-info">
            <span>共 {{ info.totalCount }} 条记录，每页 {{ info.PageSize }} 条，第 {{ info.PageIndex }} 页</span>
          </div>
          <div class="pagination-controls">
            <el-pagination v-model:current-page="info.PageIndex" v-model:page-size="info.PageSize"
              :page-sizes="[10, 20, 30, 50, 100]" layout="sizes, prev, pager, next, jumper" :total="info.totalCount"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
          </div>
        </div>
      </el-card>
    </div>

    <!-- 入住信息对话框 -->
    <el-dialog v-model="dialogFormVisible" title="入住信息录入" width="500px" class="checkin-dialog">
      <el-form :model="form" label-width="100px">
        <el-form-item label="入住人姓名">
          <el-input v-model="form.MemberName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="form.Sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="form.Tel" autocomplete="off" />
        </el-form-item>

        <el-form-item label="身份证">
          <el-input v-model="form.IdCard" autocomplete="off" />
        </el-form-item>

        <el-form-item label="房号">
          <el-select v-model="form.RoomCode" placeholder="请选择房间号">
            <el-option label="201" value="201" />
            <el-option v-for="item in fanhao" :key="item.RoomId" :label="item.RoomName" :value="item.RoomName" />
          </el-select>
        </el-form-item>

        <el-form-item label="订单说明">
          <el-input v-model="form.OrderDesc" autocomplete="off" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updat">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue'
import type { ComponentSize } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
// 移除错误的 ECharts 导入

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  OrderId: '',
  MemberName: '',
  Sex: '',
  Tel: '',
  IdCard: '',
  RoomTypeName: '',
  RoomCode: '',
  OrderDesc: '',
})

let info: any = reactive({
  PageIndex: 1,
  PageSize: 10,
  Name: '',
  RoomTypeId: -1,
  RoomCode: '',
  Status: -1,
  CheckInDate: '',
  CheckOutDate: '',
  totalCount: 0,
  totalPage: 0
})

let tableData: any = ref([])

const Ored = () => {
  console.log("tableData=", tableData);
  axios({
    url: '/api/Order/OrderlnfoList',
    method: 'get',
    params: info
  }).then(res => {
    console.log("res=", res);
    if (res.data.code == 200) {
      tableData.value = res.data.data.data
      info.totalCount = res.data.data.totalCount
      info.totalPage = res.data.data.totalPage
    }
  })
}

let stt: any = ref([])

const ssdd = () => {
  console.log("stt=", stt);
  axios.get('/api/Order/Fangxing').then(res => {
    console.log("res=", res);
    stt.value = res.data.data
  })
}

//房号值
let fanhao: any = ref([])

const Fan = () => {
  console.log("fanhao=", fanhao);
  axios.get('/api/Order/FanHao').then(res => {
    console.log("res=", res);
    fanhao.value = res.data.data
  })
}

//入住
const fredf = (Id: any) => {
  console.log("Id=", Id);
  dialogFormVisible.value = true
  axios({
    url: '/api/Order/Fantian9',
    method: 'get',
    params: {
      Id: Id
    }
  }).then(res => {
    console.log("res=", res);
    Object.assign(form, res.data.data)
  })
}

//修改
const updat = () => {
  dialogFormVisible.value = false
  axios({
    url: '/api/Order/OrderUpdate',
    method: 'put',
    data: form
  }).then(res => {
    console.log("res=", res);
    if (res.data.code == 200) {
      ElMessage({ message: res.data.msg, type: 'success', })
      Ored()
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

//取消入住
const dele = (Id: any) => {
  console.log(Id);
  ElMessageBox.confirm(
    '确定取消在本店入住吗',
    '智慧酒店',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('/api/Order/OrderDel', { params: { Id: Id } }).then(res => {
        console.log(res);
        ElMessage({
          type: 'success',
          message: '取消成功',
        })
        Ored();
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消失败',
      })
    })
}


//支付
const Zhifu = (OrderId: any) => {
  console.log("OrderId=", OrderId);
  ElMessageBox.confirm(
    '确定支付吗',
    '付款',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '支付成功',
      })

      var data = {
        OutTradeNo: OrderId + '',
        NotifyUrl: 'http://j266kd.natappfree.cc/api/AlipayNotify/pagepay',
        ReturnUrl: 'http://localhost:5176/OrderinfoList',
      }

      axios({
        url: apiUrl+'/api/Alipay',
        method: 'post',
        data: data
      }).then(res => {
        console.log("res=", res);
        if (res.status == 200) {
          document.writeln(res.data)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消支付',
      })
    })
}

const apiUrl = import.meta.env.VITE_APP_API_URL;
console.log(import.meta.env);
console.log(apiUrl);

//导出
const daochu: any = () => {
  location.href = `${apiUrl}/api/Order/Daochu?PageIndex=${info.PageIndex}&PageSize=${info.PageSize}&Name=${info.Name}&RoomTypeId=${info.RoomTypeId}&RoomCode=${info.RoomCode}&Status=${info.Status}&CheckInDate=${info.CheckInDate}&CheckOutDate=${info.CheckOutDate}`
}

//全选/反选
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref([])
const Ids: any = ref([])

const handleSelectionChange = (vue: any) => {
  multipleSelection.value = vue
  console.log("multipleSelection=", multipleSelection);
  Ids.value = multipleSelection.value.map((item: any) => {
    return item.OrderId
  })
  console.log("Ids=", Ids);
}

//批量删除
const quxiao = () => {
  console.log("Ids=", Ids);
  if (Ids.value.length == 0) {
    ElMessage({ type: 'info', message: '必须选中一项', })
    return;
  }

  var data = {
    OrderinfoId: Ids.value
  }

  axios.put('/api/Order/Ordercancellation', data).then(res => {
    console.log("res=", res);
    ElMessage({ type: 'success', message: '取消成功', })
    Ored();
  })
}

onMounted(() => {
  Ored()
  ssdd()
  Fan()
})

const handleClick = () => {
  console.log('click')
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  info.PageSize = val
  Ored()
}

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  info.PageIndex = val
  Ored()
}
</script>

<style scoped>
.order-list-container {
  padding: 0;
}

.search-section {
  margin-bottom: 20px;
}

.search-card {
  background: #fff;
  border-radius: 8px;
}

.search-form {
  padding: 20px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input,
.search-select {
  min-width: 200px;
  flex: 1;
}

.status-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.action-btn {
  margin-right: 10px;
}

.table-section {
  margin-bottom: 20px;
}

.table-card {
  background: #fff;
  border-radius: 8px;
}

.order-table {
  margin: 0;
}

.date-cell {
  color: #666;
  font-size: 14px;
}

.money-cell {
  color: #e6a23c;
  font-weight: 600;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-link {
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.action-link:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.pagination-section {
  margin-top: 20px;
}

.pagination-card {
  background: #fff;
  border-radius: 8px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
}

.checkin-dialog .el-form-item {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .search-select {
    min-width: auto;
    width: 100%;
  }

  .status-group {
    justify-content: flex-start;
  }

  .pagination-container {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .action-buttons {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .search-form {
    padding: 15px;
  }

  .pagination-container {
    padding: 15px;
  }
}
</style>